Плеер фильмов

Поиск фильмов и сериалов:

ID Кинопоиска:

Киносправочник

Поиск информации о фильме...

Найдите информацию о любом фильме

Введите название фильма в поле выше, чтобы получить подробную информацию, включая описание, рейтинг, актерский состав и многое другое. Примеры для поиска: "Мстители", "Интерстеллар", "Остров проклятых"

Название фильма

Рейтинг: 0.0

Описание фильма будет загружено здесь...

Актерский состав

Кинопоиск Трейлер

Настройки пользователя

Настройте параметры вашего профиля

Имя пользователя

👤

Добро пожаловать, Посетитель Oink Platforms!

Загрузка данных о погоде...

Город

Дата

0°C

Описание погоды

Ощущается как

0°C

Влажность

0%

Ветер

0 км/ч

Давление

0 hPa

0

Источники

0

Подписки

Московское время:

Платформа станет не доступна через:

иза технического рестарта чтобы оптимизировать работу платформы. Платформа будет не доступна ровно 5:00 по МСК

Статус: Ожидание 5:00 по московскому времени

Вкусное за Выгодой

Нажми на кнопку и выиграй крутой приз!

Открой рулетку я верю ты выбьеш крутой дроп!

Нажми кнопку!

Получи промокод или игровой приз

0

Попыток

0

Призов

Мои призы

Ultra Поиск — Узнай что скрывает весь интернет (Сервис)

0

OinkPL - Платформа сервисов

Создавайте, публикуйте и используйте разнообразные сервисы в одной экосистеме. Ваше воображение - единственный предел.

Создать новый сервис

🎨 Библиотека Готовых Шаблонов

Выбирай, открывай и редактируй под себя!

Сервис OinkPL

1

Название сервиса

Описание сервиса

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Змейка</title>
    <style>
        body {
            margin: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background: #1a1a2e;
            font-family: Arial;
        }
        canvas {
            border: 4px solid #0f3460;
            border-radius: 10px;
            box-shadow: 0 0 20px rgba(15,52,96,0.5);
        }
        .score {
            position: absolute;
            top: 20px;
            color: #fff;
            font-size: 24px;
        }
    </style>
</head>
<body>
    <div class="score">Счет: <span id="score">0</span></div>
    <canvas id="c" width="400" height="400"></canvas>
    <script>
        const c = document.getElementById('c');
        const ctx = c.getContext('2d');
        const s = 20;
        const t = c.width / s;
        let snake = [{x:10, y:10}];
        let food = {x:15, y:15};
        let dx = 0, dy = 0;
        let score = 0;

setInterval(draw, 100);
    </script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Калькулятор</title>
    <style>
        body {
            margin: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background: linear-gradient(135deg, #667eea, #764ba2);
            font-family: Arial;
        }
        .calc {
            width: 320px;
            background: #1e1e1e;
            border-radius: 20px;
            box-shadow: 0 20px 60px rgba(0,0,0,0.5);
            overflow: hidden;
        }
        .display {
            padding: 30px 20px;
            text-align: right;
            background: #2d2d2d;
            color: #fff;
            min-height: 80px;
        }
        .prev {
            font-size: 16px;
            color: #888;
            margin-bottom: 10px;
        }
        .curr {
            font-size: 36px;
            font-weight: bold;
        }
        .buttons {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 1px;
            background: #000;
        }
        button {
            border: none;
            padding: 25px;
            font-size: 20px;
            cursor: pointer;
            background: #2d2d2d;
            color: #fff;
        }
        button:hover {
            background: #3d3d3d;
        }
        .op {
            background: #ff9500;
        }
        .eq {
            background: #4CAF50;
        }
        .cl {
            background: #f44336;
        }
        .zero {
            grid-column: span 2;
        }
    </style>
</head>
<body>
    <div class="calc">
        <div class="display">
            <div class="prev" id="prev"></div>
            <div class="curr" id="curr">0</div>
        </div>
        <div class="buttons">
            <button class="cl" onclick="clearC()">AC</button>
            <button onclick="del()">DEL</button>
            <button class="op" onclick="setOp('/')">÷</button>
            <button onclick="append('7')">7</button>
            <button onclick="append('8')">8</button>
            <button onclick="append('9')">9</button>
            <button class="op" onclick="setOp('*')">×</button>
            <button onclick="append('4')">4</button>
            <button onclick="append('5')">5</button>
            <button onclick="append('6')">6</button>
            <button class="op" onclick="setOp('-')">−</button>
            <button onclick="append('1')">1</button>
            <button onclick="append('2')">2</button>
            <button onclick="append('3')">3</button>
            <button class="op" onclick="setOp('+')">+</button>
            <button class="zero" onclick="append('0')">0</button>
            <button onclick="append('.')">.</button>
            <button class="eq" onclick="calc()">=</button>
        </div>
    </div>
    <script>
        let c = '0', p = '', o = null;

function upd() {
            document.getElementById('curr').textContent = c;
            document.getElementById('prev').textContent = p + (o || '');
        }

function setOp(op) {
            if (o && p) calc();
            o = op;
            p = c;
            c = '0';
            upd();
        }

function calc() {
            if (!o || !p) return;
            const a = parseFloat(p), b = parseFloat(c);
            let r;
            switch(o) {
                case '+': r = a + b; break;
                case '-': r = a - b; break;
                case '*': r = a * b; break;
                case '/': r = a / b; break;
            }
            c = r.toString();
            o = null;
            p = '';
            upd();
        }

function clearC() {
            c = '0';
            p = '';
            o = null;
            upd();
        }

function del() {
            c = c.slice(0, -1) || '0';
            upd();
        }

upd();
    </script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>TODO</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: Arial;
            background: linear-gradient(135deg, #667eea, #764ba2);
            min-height: 100vh;
            padding: 20px;
        }
        .container {
            max-width: 600px;
            margin: 0 auto;
        }
        h1 {
            color: #fff;
            text-align: center;
            margin: 40px 0;
            font-size: 48px;
        }
        .input-container {
            display: flex;
            gap: 10px;
            margin-bottom: 30px;
        }
        input {
            flex: 1;
            padding: 15px;
            border: none;
            border-radius: 10px;
            font-size: 16px;
        }
        button {
            padding: 15px 30px;
            border: none;
            border-radius: 10px;
            font-size: 16px;
            font-weight: bold;
            cursor: pointer;
            background: #4CAF50;
            color: #fff;
        }
        .todo-list {
            background: #fff;
            border-radius: 15px;
            padding: 20px;
        }
        .todo-item {
            display: flex;
            align-items: center;
            gap: 15px;
            padding: 15px;
            margin: 10px 0;
            background: #f5f5f5;
            border-radius: 10px;
        }
        .todo-item.done {
            opacity: 0.6;
        }
        .todo-item.done .txt {
            text-decoration: line-through;
        }
        .txt {
            flex: 1;
            color: #333;
        }
        .del {
            background: #f44336;
            color: #fff;
            padding: 8px 15px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>📝 TODO</h1>
        <div class="input-container">
            <input type="text" id="inp" placeholder="Добавить задачу..." onkeypress="if(event.key==='Enter')add()">
            <button onclick="add()">➕</button>
        </div>
        <div class="todo-list" id="list"></div>
    </div>
    <script>
        let todos = JSON.parse(localStorage.getItem('todos') || '[]');

function render() {
            document.getElementById('list').innerHTML = todos.map((t, i) => `
                <div class="todo-item ${t.done ? 'done' : ''}">
                    <input type="checkbox" ${t.done ? 'checked' : ''} onchange="toggle(${i})">
                    <div class="txt">${t.text}</div>
                    <button class="del" onclick="remove(${i})">🗑️</button>
                </div>
            `).join('');
        }

function toggle(i) {
            todos[i].done = !todos[i].done;
            save();
        }

function remove(i) {
            todos.splice(i, 1);
            save();
        }

function save() {
            localStorage.setItem('todos', JSON.stringify(todos));
            render();
        }

render();
    </script>
</body>
</html>

// Инициализация при загрузке страницы
        window.onload = function() {
            checkUrlForFilmId();
            
            // Задержка для частиц
            const particles = document.querySelectorAll('.particle');
            particles.forEach(particle => {
                const delay = Math.random() * 5;
                particle.style.animationDelay = `${delay}s`;
            });

// Обработка нажатия Enter в поле поиска
            document.getElementById('searchInput')?.addEventListener('keypress', function(e) {
                if (e.key === 'Enter') {
                    searchContent();
                }
            });
            
            // Загружаем популярные фильмы при загрузке страницы
            loadPopularMovies();
        };

// Функция для открытия плеера
        function openPlayer() {
            let kpId = document.getElementById("kpIdInput").value;
            if (!kpId) {
                alert("Пожалуйста, введите ID Кинопоиска");
                return;
            }
            
            // Обновляем URL в адресной строке
            window.history.pushState({}, '', `/film/${kpId}`);
            
            let iframeSrc = currentPlayerSource.url + kpId;
            document.getElementById("playerIframe").src = iframeSrc;
            document.getElementById("playerModal").style.display = "flex";
        }

// Функция для закрытия плеера
        function closePlayer() {
            document.getElementById("playerModal").style.display = "none";
            document.getElementById("playerIframe").src = ""; // Очищаем iframe при закрытии
            // Возвращаем исходный URL
            window.history.pushState({}, '', '/');
        }

// Функция для выбора источника плеера
        function selectPlayerSource(sourceId) {
            const source = playerSources.find(s => s.id === sourceId);
            if (source) {
                currentPlayerSource = source;
                
                // Обновляем активный класс у кнопок
                document.querySelectorAll('.source-btn').forEach(btn => {
                    btn.classList.remove('active');
                });
                document.querySelector(`.source-btn[data-source="${sourceId}"]`).classList.add('active');
                
                // Если плеер открыт, обновляем источник
                if (document.getElementById("playerModal").style.display === "flex") {
                    let kpId = document.getElementById("kpIdInput").value;
                    if (kpId) {
                        let iframeSrc = currentPlayerSource.url + kpId;
                        document.getElementById("playerIframe").src = iframeSrc;
                    }
                }
            }
        }

// Функция для поиска фильмов/сериалов по названию
        async function searchContent() {
            const searchInput = document.getElementById("searchInput").value.trim();
            const resultsContainer = document.getElementById("searchResults");
            
            if (!searchInput) {
                alert("Пожалуйста, введите название фильма или сериала");
                return;
            }
            
            // Показываем индикатор загрузки
            resultsContainer.innerHTML = '<div class="loading">Поиск...</div>';
            
            try {
                const apiUrl = `https://kinopoiskapiunofficial.tech/api/v2.1/films/search-by-keyword?keyword=${encodeURIComponent(searchInput)}&page=1`;
                
                const response = await fetch(apiUrl, {
                    headers: {
                        'X-API-KEY': '960dc4e3-9eae-4072-8f0c-98a5ed6c0d2a',
                        'Content-Type': 'application/json',
                    }
                });
                
                if (!response.ok) {
                    throw new Error('Ошибка при поиске. Статус: ' + response.status);
                }
                
                const data = await response.json();
                displayResults(data.films);
            } catch (error) {
                console.error('Ошибка:', error);
                resultsContainer.innerHTML = '<div class="error">Произошла ошибка при поиске. Попробуйте еще раз.</div>';
            }
        }

// Функция для отображения результатов поиска
        function displayResults(films) {
            const resultsContainer = document.getElementById("searchResults");
            
            if (!films || films.length === 0) {
                resultsContainer.innerHTML = '<div class="no-results">Ничего не найдено</div>';
                return;
            }
            
            let html = '<div class="results-title">Результаты поиска:</div>';
            
            films.slice(0, 5).forEach(film => {
                html += `
                    <div class="film-item" onclick="selectFilm(${film.filmId}, '${film.nameRu || film.nameEn}')">
                        <div class="film-poster">
                            <img src="${film.posterUrlPreview || 'https://via.placeholder.com/100x150'}" alt="${film.nameRu || film.nameEn}" onerror="this.src='https://via.placeholder.com/100x150'">
                        </div>
                        <div class="film-info">
                            <div class="film-title">${film.nameRu || film.nameEn}</div>
                            <div class="film-year">${film.year || 'Год неизвестен'}</div>
                            <div class="film-rating">Рейтинг: ${film.rating || 'нет'}</div>
                        </div>
                    </div>
                `;
            });
            
            resultsContainer.innerHTML = html;
        }

// Функция для выбора фильма из результатов поиска
        function selectFilm(filmId, filmTitle) {
            document.getElementById("kpIdInput").value = filmId;
            document.getElementById("selectedFilm").textContent = `Выбран: ${filmTitle} (ID: ${filmId})`;
            document.getElementById("searchResults").innerHTML = '';
            document.getElementById("searchInput").value = '';
        }

// Функция для очистки результатов поиска
        function clearSearch() {
            document.getElementById("searchResults").innerHTML = '';
            document.getElementById("searchInput").value = '';
        }

// Проверка URL на наличие ID фильма
        function checkUrlForFilmId() {
            const path = window.location.pathname;
            const filmIdMatch = path.match(/\/film\/(\d+)/);
            
            if (filmIdMatch && filmIdMatch[1]) {
                const filmId = filmIdMatch[1];
                document.getElementById("kpIdInput").value = filmId;
                openPlayer();
            }
        }

// Функции для Киносправочника
        async function searchMovieInfo() {
            const query = document.getElementById('movieSearchInput').value.trim();
            if (query.length < 1) return;
            
            // Показать loader
            document.getElementById('movieLoader').style.display = 'block';
            document.getElementById('movieContentContainer').style.display = 'none';
            document.getElementById('movieInitialMessage').style.display = 'none';
            
            try {
                // Токен API Кинопоиска
                const KINOPOISK_API_TOKEN = 'DAZA3NB-CG44KAV-Q4RF847-6BKMVG8';
                
                // Выполняем поиск через API Кинопоиска
                const searchResponse = await fetch(`https://api.kinopoisk.dev/v1.4/movie/search?page=1&limit=1&query=${encodeURIComponent(query)}`, {
                    headers: {
                        'X-API-Key': KINOPOISK_API_TOKEN
                    }
                });
                
                if (!searchResponse.ok) {
                    throw new Error('Ошибка при поиске фильма');
                }
                
                const searchData = await searchResponse.json();
                
                if (searchData.docs && searchData.docs.length > 0) {
                    const movieId = searchData.docs[0].id;
                    
                    // Получаем детальную информацию о фильме
                    const movieResponse = await fetch(`https://api.kinopoisk.dev/v1.4/movie/${movieId}`, {
                        headers: {
                            'X-API-Key': KINOPOISK_API_TOKEN
                        }
                    });
                    
                    if (!movieResponse.ok) {
                        throw new Error('Ошибка при получении информации о фильме');
                    }
                    
                    const movieData = await movieResponse.json();
                    
                    // Заполняем данные о фильме
                    document.getElementById('moviePoster').src = movieData.poster?.url || 'https://via.placeholder.com/400x600/121212/ffffff?text=Нет+постера';
                    document.getElementById('movieTitle').textContent = movieData.name || movieData.alternativeName || 'Название неизвестно';
                    
                    // Очистка и заполнение мета-информации
                    const movieMeta = document.getElementById('movieMeta');
                    movieMeta.innerHTML = '';
                    if (movieData.year) movieMeta.innerHTML += `<span>${movieData.year}</span>`;
                    if (movieData.ageRating) movieMeta.innerHTML += `<span>${movieData.ageRating}+</span>`;
                    if (movieData.genres && movieData.genres.length > 0) {
                        movieData.genres.slice(0, 3).forEach(genre => {
                            movieMeta.innerHTML += `<span>${genre.name}</span>`;
                        });
                    }
                    if (movieData.movieLength) {
                        const hours = Math.floor(movieData.movieLength / 60);
                        const minutes = movieData.movieLength % 60;
                        movieMeta.innerHTML += `<span>${hours}ч ${minutes}м</span>`;
                    }
                    
                    document.getElementById('movieRatingValue').textContent = movieData.rating?.kp ? movieData.rating.kp.toFixed(1) : 'Н/Д';
                    document.getElementById('movieDescription').textContent = movieData.description || 'Описание отсутствует';
                    
                    // Заполняем актерский состав
                    const castContainer = document.getElementById('movieCastContainer');
                    castContainer.innerHTML = '';
                    if (movieData.persons && movieData.persons.length > 0) {
                        const actors = movieData.persons.filter(person => person.enProfession === 'actor').slice(0, 10);
                        
                        if (actors.length > 0) {
                            actors.forEach(actor => {
                                castContainer.innerHTML += `
                                    <div class="cast-member">
                                        <img src="${actor.photo || 'https://via.placeholder.com/80x80/121212/ffffff?text=Нет+фото'}" alt="${actor.name}" class="cast-photo">
                                        <div class="cast-name">${actor.name || 'Неизвестно'}</div>
                                        <div class="cast-role">${actor.description || 'Актер'}</div>
                                    </div>
                                `;
                            });
                        } else {
                            castContainer.innerHTML = 'Информация об актерах отсутствует';
                        }
                    } else {
                        castContainer.innerHTML = 'Информация об актерах отсутствует';
                    }
                    
                    // Устанавливаем ссылки на кнопки
                    document.getElementById('movieKinopoiskBtn').setAttribute('data-url', `https://www.kinopoisk.ru/film/${movieId}/`);
                    if (movieData.videos && movieData.videos.trailers && movieData.videos.trailers.length > 0) {
                        document.getElementById('movieTrailerBtn').setAttribute('data-url', movieData.videos.trailers[0].url);
                    } else {
                        document.getElementById('movieTrailerBtn').removeAttribute('data-url');
                    }
                    
                    // Скрыть loader и показать контент
                    document.getElementById('movieLoader').style.display = 'none';
                    document.getElementById('movieContentContainer').style.display = 'grid';
                    
                    // Загружаем похожие фильмы
                    loadSimilarMovies(movieId);
                } else {
                    throw new Error('Фильм не найден');
                }
            } catch (error) {
                console.error('Ошибка:', error);
                document.getElementById('movieLoader').style.display = 'none';
                document.getElementById('movieInitialMessage').style.display = 'block';
                document.getElementById('movieInitialMessage').innerHTML = `
                    <h2>Произошла ошибка</h2>
                    ${error.message}
                    Попробуйте другой запрос или повторите попытку позже.
                `;
            }
        }

// Функции для погоды
        async function getWeatherByLocation() {
            updateWeatherUI("Определение местоположения...");
            
            if (!navigator.geolocation) {
                updateWeatherUI("Геолокация не поддерживается вашим браузером");
                return;
            }

navigator.geolocation.getCurrentPosition(
                async (position) => {
                    const lat = position.coords.latitude;
                    const lon = position.coords.longitude;
                    await fetchWeatherByCoords(lat, lon);
                },
                async (error) => {
                    console.error('Ошибка геолокации:', error);
                    updateWeatherUI("Не удалось определить местоположение. Разрешите доступ к геолокации или выберите город вручную.");
                },
                {
                    enableHighAccuracy: true,
                    timeout: 10000,
                    maximumAge: 60000
                }
            );
        }

async function fetchWeatherByCoords(lat, lon) {
            try {
                updateWeatherUI("Получение данных о погоде...");
                
                // Получаем данные о погоде
                const response = await fetch(
                    `https://api.open-meteo.com/v1/forecast?latitude=${lat}&longitude=${lon}¤t=temperature_2m,relative_humidity_2m,apparent_temperature,precipitation,rain,showers,snowfall,weather_code,pressure_msl,surface_pressure,wind_speed_10m,wind_direction_10m&timezone=auto`
                );
                
                if (!response.ok) {
                    throw new Error('Ошибка получения данных о погоде');
                }
                
                const data = await response.json();
                
                // Получаем название города по координатам
                const cityName = await getCityName(lat, lon);
                
                displayWeatherData(data, cityName);
                
            } catch (error) {
                console.error('Ошибка получения погоды:', error);
                updateWeatherUI("Не удалось получить данные о погоде. Проверьте подключение к интернету.");
            }
        }

async function getWeatherByCity(city) {
            try {
                updateWeatherUI(`Поиск города ${city}...`);
                
                // Сначала получаем координаты города
                const geoResponse = await fetch(
                    `https://geocoding-api.open-meteo.com/v1/search?name=${encodeURIComponent(city)}&count=1&language=ru&format=json`
                );
                
                if (!geoResponse.ok) {
                    throw new Error('Ошибка поиска города');
                }
                
                const geoData = await geoResponse.json();
                
                if (!geoData.results || geoData.results.length === 0) {
                    throw new Error('Город не найден');
                }
                
                const location = geoData.results[0];
                await fetchWeatherByCoords(location.latitude, location.longitude);
                
            } catch (error) {
                console.error('Ошибка получения погоды по городу:', error);
                updateWeatherUI("Не удалось найти город или получить данные о погоде.");
            }
        }

async function getCityName(lat, lon) {
            try {
                const response = await fetch(
                    `https://geocoding-api.open-meteo.com/v1/reverse?latitude=${lat}&longitude=${lon}&language=ru&format=json`
                );
                
                if (response.ok) {
                    const data = await response.json();
                    if (data.results && data.results.length > 0) {
                        return data.results[0].name;
                    }
                }
            } catch (error) {
                console.error('Ошибка получения названия города:', error);
            }
            
            return `Широта: ${lat.toFixed(2)}, Долгота: ${lon.toFixed(2)}`;
        }

function displayWeatherData(data, cityName) {
            const current = data.current;
            
            const temp = Math.round(current.temperature_2m);
            const apparentTemp = Math.round(current.apparent_temperature);
            const humidity = current.relative_humidity_2m;
            const windSpeed = current.wind_speed_10m;
            const pressure = Math.round(current.pressure_msl);
            const weatherCode = current.weather_code;
            
            const weatherIcon = document.getElementById('weatherIcon');
            const weatherTemp = document.getElementById('weatherTemp');
            const weatherDesc = document.getElementById('weatherDesc');
            const weatherLocation = document.getElementById('weatherLocation');
            const weatherHumidity = document.getElementById('weatherHumidity');
            const weatherWind = document.getElementById('weatherWind');
            const weatherPressure = document.getElementById('weatherPressure');

// Обновляем основную информацию
            weatherTemp.textContent = `${temp}°C`;
            weatherDesc.textContent = `${getWeatherDescription(weatherCode)} (ощущается как ${apparentTemp}°C)`;
            weatherLocation.textContent = cityName;
            weatherHumidity.textContent = `${humidity}%`;
            weatherWind.textContent = `${windSpeed} м/с`;
            weatherPressure.textContent = `${pressure} гПа`;
            weatherIcon.textContent = getWeatherIcon(weatherCode);

// Проверяем наличие неблагоприятных погодных условий
            const alerts = checkWeatherAlerts(current, weatherCode);
            displayWeatherAlerts(alerts);
        }

function updateWeatherUI(message) {
            const weatherDesc = document.getElementById('weatherDesc');
            weatherDesc.textContent = message;
        }

function getWeatherDescription(code) {
            const weatherCodes = {
                0: 'Ясно',
                1: 'Преимущественно ясно',
                2: 'Переменная облачность',
                3: 'Пасмурно',
                45: 'Туман',
                48: 'Туман с инеем',
                51: 'Легкая морось',
                53: 'Умеренная морось',
                55: 'Сильная морось',
                56: 'Легкая ледяная морось',
                57: 'Сильная ледяная морось',
                61: 'Небольшой дождь',
                63: 'Умеренный дождь',
                65: 'Сильный дождь',
                66: 'Легкий ледяной дождь',
                67: 'Сильный ледяной дождь',
                71: 'Небольшой снег',
                73: 'Умеренный снег',
                75: 'Сильный снег',
                77: 'Снежные зерна',
                80: 'Небольшие ливни',
                81: 'Умеренные ливни',
                82: 'Сильные ливни',
                85: 'Небольшие снегопады',
                86: 'Сильные снегопады',
                95: 'Гроза',
                96: 'Гроза с небольшим градом',
                99: 'Гроза с сильным градом'
            };
            
            return weatherCodes[code] || 'Неизвестно';
        }

function getWeatherIcon(code) {
            if (code === 0) return '☀️';
            if (code <= 2) return '🌤️';
            if (code <= 3) return '☁️';
            if (code <= 48) return '🌫️';
            if (code <= 67) return '🌧️';
            if (code <= 77) return '❄️';
            if (code <= 82) return '🌧️';
            if (code <= 86) return '❄️';
            if (code <= 99) return '⛈️';
            return '🌤️';
        }

function checkWeatherAlerts(current, weatherCode) {
            const alerts = [];
            const temp = current.temperature_2m;
            const windSpeed = current.wind_speed_10m;
            const rain = current.rain || 0;
            const showers = current.showers || 0;
            const snowfall = current.snowfall || 0;

// Проверяем на дождь
            if (rain > 0 || showers > 0) {
                alerts.push({
                    type: 'rain',
                    message: 'Ожидается дождь. Возьмите зонт!',
                    icon: '🌧️',
                    title: 'Дождь'
                });
            }

// Проверяем на снег
            if (snowfall > 0) {
                alerts.push({
                    type: 'snow',
                    message: 'Ожидается снег. Будьте осторожны на дорогах!',
                    icon: '❄️',
                    title: 'Снег'
                });
            }

// Проверяем на грозу
            if (weatherCode >= 95) {
                alerts.push({
                    type: 'storm',
                    message: 'Ожидается гроза. Оставайтесь в помещении!',
                    icon: '⛈️',
                    title: 'Гроза'
                });
            }

// Проверяем на сильный ветер
            if (windSpeed > 15) {
                alerts.push({
                    type: 'warning',
                    message: 'Сильный ветер. Будьте осторожны!',
                    icon: '💨',
                    title: 'Сильный ветер'
                });
            }

// Проверяем на экстремальные температуры
            if (temp < -10) {
                alerts.push({
                    type: 'warning',
                    message: 'Сильный мороз. Одевайтесь теплее!',
                    icon: '🥶',
                    title: 'Сильный мороз'
                });
            } else if (temp > 35) {
                alerts.push({
                    type: 'warning',
                    message: 'Сильная жара. Пейте больше воды!',
                    icon: '🥵',
                    title: 'Сильная жара'
                });
            }

return alerts;
        }

function displayWeatherAlerts(alerts) {
            const weatherAlerts = document.getElementById('weatherAlerts');
            
            if (alerts.length === 0) {
                weatherAlerts.innerHTML = '<div class="no-alerts">Нет активных предупреждений</div>';
                return;
            }

// Переключение между функциями
        function showSection(sectionId) {
            // Скрыть все секции
            document.querySelectorAll('.function-section').forEach(section => {
                section.style.display = 'none';
            });
            
            // Показать выбранную секцию
            document.getElementById(sectionId).style.display = 'block';
            
            // Обновить активную кнопку
            document.querySelectorAll('.nav-btn').forEach(btn => {
                btn.classList.remove('active');
            });
            document.querySelector(`.nav-btn[data-section="${sectionId}"]`).classList.add('active');
            
            // Автоматически загрузить погоду при переключении на погоду
            if (sectionId === 'weatherSection') {
                getWeatherByLocation();
            }
            
            // Загрузить популярные фильмы при переключении на плеер
            if (sectionId === 'playerSection') {
                loadPopularMovies();
            }
        }

// НОВЫЙ ФУНКЦИОНАЛ: Загрузка популярных фильмов
        async function loadPopularMovies() {
            try {
                const KINOPOISK_API_TOKEN = 'DAZA3NB-CG44KAV-Q4RF847-6BKMVG8';
                const response = await fetch('https://api.kinopoisk.dev/v1.4/movie?page=1&limit=10&lists=popular-films', {
                    headers: {
                        'X-API-Key': KINOPOISK_API_TOKEN
                    }
                });
                
                if (!response.ok) {
                    throw new Error('Ошибка загрузки популярных фильмов');
                }
                
                const data = await response.json();
                displayPopularMovies(data.docs);
            } catch (error) {
                console.error('Ошибка:', error);
                document.getElementById('popularMoviesContainer').innerHTML = '<div class="error">Не удалось загрузить популярные фильмы</div>';
            }
        }

// Отображение популярных фильмов
        function displayPopularMovies(movies) {
            const container = document.getElementById('popularMoviesContainer');
            if (!movies || movies.length === 0) {
                container.innerHTML = '<div class="no-results">Нет доступных фильмов</div>';
                return;
            }
            
            let html = '<div class="section-subtitle">Популярные фильмы</div><div class="movies-grid">';
            
            movies.forEach(movie => {
                html += `
                    <div class="movie-card" onclick="selectFilm(${movie.id}, '${movie.name || movie.alternativeName}')">
                        <div class="movie-card-poster">
                            <img src="${movie.poster?.previewUrl || 'https://via.placeholder.com/150x225'}" alt="${movie.name || movie.alternativeName}">
                        </div>
                        <div class="movie-card-info">
                            <div class="movie-card-title">${movie.name || movie.alternativeName}</div>
                            <div class="movie-card-year">${movie.year || 'Год неизвестен'}</div>
                            <div class="movie-card-rating">⭐ ${movie.rating?.kp?.toFixed(1) || 'Н/Д'}</div>
                        </div>
                    </div>
                `;
            });
            
            html += '</div>';
            container.innerHTML = html;
        }

// НОВЫЙ ФУНКЦИОНАЛ: Загрузка топ-фильмов
        async function loadTopMovies() {
            try {
                const KINOPOISK_API_TOKEN = 'DAZA3NB-CG44KAV-Q4RF847-6BKMVG8';
                const response = await fetch('https://api.kinopoisk.dev/v1.4/movie?page=1&limit=10&selectFields=id&selectFields=name&selectFields=year&selectFields=rating&selectFields=poster&sortField=rating.kp&sortType=-1', {
                    headers: {
                        'X-API-Key': KINOPOISK_API_TOKEN
                    }
                });
                
                if (!response.ok) {
                    throw new Error('Ошибка загрузки топ-фильмов');
                }
                
                const data = await response.json();
                displayTopMovies(data.docs);
            } catch (error) {
                console.error('Ошибка:', error);
                document.getElementById('topMoviesContainer').innerHTML = '<div class="error">Не удалось загрузить топ-фильмы</div>';
            }
        }

// Отображение топ-фильмов
        function displayTopMovies(movies) {
            const container = document.getElementById('topMoviesContainer');
            if (!movies || movies.length === 0) {
                container.innerHTML = '<div class="no-results">Нет доступных фильмов</div>';
                return;
            }
            
            let html = '<div class="section-subtitle">Топ фильмов по рейтингу</div><div class="movies-grid">';
            
            movies.forEach(movie => {
                html += `
                    <div class="movie-card" onclick="selectFilm(${movie.id}, '${movie.name || movie.alternativeName}')">
                        <div class="movie-card-poster">
                            <img src="${movie.poster?.previewUrl || 'https://via.placeholder.com/150x225'}" alt="${movie.name || movie.alternativeName}">
                        </div>
                        <div class="movie-card-info">
                            <div class="movie-card-title">${movie.name || movie.alternativeName}</div>
                            <div class="movie-card-year">${movie.year || 'Год неизвестен'}</div>
                            <div class="movie-card-rating">⭐ ${movie.rating?.kp?.toFixed(1) || 'Н/Д'}</div>
                        </div>
                    </div>
                `;
            });
            
            html += '</div>';
            container.innerHTML = html;
        }

// НОВЫЙ ФУНКЦИОНАЛ: Загрузка ожидаемых новинок
        async function loadUpcomingMovies() {
            try {
                const KINOPOISK_API_TOKEN = 'DAZA3NB-CG44KAV-Q4RF847-6BKMVG8';
                const currentYear = new Date().getFullYear();
                const response = await fetch(`https://api.kinopoisk.dev/v1.4/movie?page=1&limit=10&year=${currentYear}&status=filming`, {
                    headers: {
                        'X-API-Key': KINOPOISK_API_TOKEN
                    }
                });
                
                if (!response.ok) {
                    throw new Error('Ошибка загрузки ожидаемых новинок');
                }
                
                const data = await response.json();
                displayUpcomingMovies(data.docs);
            } catch (error) {
                console.error('Ошибка:', error);
                document.getElementById('upcomingMoviesContainer').innerHTML = '<div class="error">Не удалось загрузить ожидаемые новинки</div>';
            }
        }

// Отображение ожидаемых новинок
        function displayUpcomingMovies(movies) {
            const container = document.getElementById('upcomingMoviesContainer');
            if (!movies || movies.length === 0) {
                container.innerHTML = '<div class="no-results">Нет доступных фильмов</div>';
                return;
            }
            
            let html = '<div class="section-subtitle">Ожидаемые новинки</div><div class="movies-grid">';
            
            movies.forEach(movie => {
                html += `
                    <div class="movie-card" onclick="selectFilm(${movie.id}, '${movie.name || movie.alternativeName}')">
                        <div class="movie-card-poster">
                            <img src="${movie.poster?.previewUrl || 'https://via.placeholder.com/150x225'}" alt="${movie.name || movie.alternativeName}">
                        </div>
                        <div class="movie-card-info">
                            <div class="movie-card-title">${movie.name || movie.alternativeName}</div>
                            <div class="movie-card-year">${movie.year || 'Год неизвестен'}</div>
                            <div class="movie-card-rating">⭐ ${movie.rating?.kp?.toFixed(1) || 'Н/Д'}</div>
                        </div>
                    </div>
                `;
            });
            
            html += '</div>';
            container.innerHTML = html;
        }

// НОВЫЙ ФУНКЦИОНАЛ: Загрузка похожих фильмов
        async function loadSimilarMovies(movieId) {
            try {
                const KINOPOISK_API_TOKEN = 'DAZA3NB-CG44KAV-Q4RF847-6BKMVG8';
                const response = await fetch(`https://api.kinopoisk.dev/v1.4/movie/${movieId}/similar`, {
                    headers: {
                        'X-API-Key': KINOPOISK_API_TOKEN
                    }
                });
                
                if (!response.ok) {
                    throw new Error('Ошибка загрузки похожих фильмов');
                }
                
                const data = await response.json();
                displaySimilarMovies(data.docs);
            } catch (error) {
                console.error('Ошибка:', error);
                // Не показываем ошибку, так как похожие фильмы - дополнительная функция
            }
        }

// Отображение похожих фильмов
        function displaySimilarMovies(movies) {
            const container = document.getElementById('similarMoviesContainer');
            if (!movies || movies.length === 0) {
                container.innerHTML = '';
                return;
            }
            
            let html = '<div class="section-subtitle">Похожие фильмы</div><div class="movies-grid">';
            
            movies.slice(0, 5).forEach(movie => {
                html += `
                    <div class="movie-card" onclick="selectFilm(${movie.id}, '${movie.name || movie.alternativeName}')">
                        <div class="movie-card-poster">
                            <img src="${movie.poster?.previewUrl || 'https://via.placeholder.com/150x225'}" alt="${movie.name || movie.alternativeName}">
                        </div>
                        <div class="movie-card-info">
                            <div class="movie-card-title">${movie.name || movie.alternativeName}</div>
                            <div class="movie-card-year">${movie.year || 'Год неизвестен'}</div>
                            <div class="movie-card-rating">⭐ ${movie.rating?.kp?.toFixed(1) || 'Н/Д'}</div>
                        </div>
                    </div>
                `;
            });
            
            html += '</div>';
            container.innerHTML = html;
        }

// НОВЫЙ ФУНКЦИОНАЛ: Поиск актеров и режиссеров
        async function searchPerson() {
            const query = document.getElementById('personSearchInput').value.trim();
            if (!query) {
                alert('Пожалуйста, введите имя актера или режиссера');
                return;
            }
            
            try {
                const KINOPOISK_API_TOKEN = 'DAZA3NB-CG44KAV-Q4RF847-6BKMVG8';
                const response = await fetch(`https://api.kinopoisk.dev/v1.4/person/search?page=1&limit=10&query=${encodeURIComponent(query)}`, {
                    headers: {
                        'X-API-Key': KINOPOISK_API_TOKEN
                    }
                });
                
                if (!response.ok) {
                    throw new Error('Ошибка поиска персоны');
                }
                
                const data = await response.json();
                displayPersonResults(data.docs);
            } catch (error) {
                console.error('Ошибка:', error);
                document.getElementById('personResultsContainer').innerHTML = '<div class="error">Не удалось выполнить поиск</div>';
            }
        }

// Отображение результатов поиска персон
        function displayPersonResults(persons) {
            const container = document.getElementById('personResultsContainer');
            if (!persons || persons.length === 0) {
                container.innerHTML = '<div class="no-results">Ничего не найдено</div>';
                return;
            }
            
            let html = '<div class="section-subtitle">Результаты поиска</div><div class="persons-grid">';
            
            persons.forEach(person => {
                html += `
                    <div class="person-card">
                        <div class="person-photo">
                            <img src="${person.photo || 'https://via.placeholder.com/120x120'}" alt="${person.name}">
                        </div>
                        <div class="person-info">
                            <div class="person-name">${person.name || 'Неизвестно'}</div>
                            <div class="person-profession">${person.enProfession || 'Актер'}</div>
                            <div class="person-movies">Фильмов: ${person.movies ? person.movies.length : 0}</div>
                        </div>
                    </div>
                `;
            });
            
            html += '</div>';
            container.innerHTML = html;
        }
    </script>
    <style>
       * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

body {
            font-family: 'Poppins', sans-serif;
            background: #0a0a0a;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 20px;
            position: relative;
            color: #fff;
        }

/* Анимированный фон */
        body::before {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background:
                radial-gradient(circle at 25% 25%, #4CAF50 0%, transparent 50%),
                radial-gradient(circle at 75% 75%, #00BCD4 0%, transparent 50%),
                radial-gradient(circle at 50% 50%, #9C27B0 0%, transparent 50%);
            filter: blur(120px);
            opacity: 0.4;
            animation: backgroundShift 12s ease-in-out infinite alternate;
            z-index: -1;
        }
        @keyframes backgroundShift {
            0% { transform: scale(1) rotate(0deg); }
            100% { transform: scale(1.1) rotate(8deg); }
        }

@keyframes float {
            0% { transform: translateY(100vh) rotate(0deg); opacity: 0; }
            10% { opacity: 1; }
            90% { opacity: 1; }
            100% { transform: translateY(-100vh) rotate(360deg); opacity: 0; }
        }

/* Контейнер для содержимого */
        .container {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 25px;
            z-index: 10;
            width: 100%;
            max-width: 1200px;
        }

/* Заголовок приложения */
        .app-header {
            text-align: center;
            margin-bottom: 20px;
        }

.app-title {
            font-size: 42px;
            font-weight: 800;
            background: linear-gradient(135deg, #4CAF50, #00BCD4, #9C27B0);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            margin-bottom: 10px;
        }

.app-subtitle {
            font-size: 18px;
            color: rgba(255, 255, 255, 0.8);
        }

/* Основной интерфейс */
        .main-interface {
            display: block;
            width: 100%;
        }

/* Навигация по функциям */
        .nav-buttons {
            display: flex;
            gap: 10px;
            margin-bottom: 20px;
            justify-content: center;
            flex-wrap: wrap;
        }

.nav-btn {
            padding: 12px 20px;
            background: rgba(255, 255, 255, 0.08);
            border: 1px solid rgba(255, 255, 255, 0.15);
            border-radius: 25px;
            color: rgba(255, 255, 255, 0.8);
            cursor: pointer;
            transition: all 0.3s ease;
            font-size: 14px;
            font-weight: 500;
            backdrop-filter: blur(10px);
        }

.nav-btn:hover {
            background: rgba(255, 255, 255, 0.12);
            border-color: rgba(255, 255, 255, 0.25);
            transform: translateY(-2px);
        }

.nav-btn.active {
            background: linear-gradient(135deg, #4CAF50, #00BCD4);
            border-color: transparent;
            color: white;
            box-shadow: 0 8px 25px rgba(76, 175, 80, 0.3);
        }

/* Секции функций */
        .function-section {
            background: rgba(30, 30, 30, 0.7);
            backdrop-filter: blur(40px);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 28px;
            width: 100%;
            padding: 35px;
            position: relative;
            box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4);
        }

.function-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: linear-gradient(90deg, #4CAF50, #00BCD4, #9C27B0, #4CAF50);
            background-size: 400% 100%;
            animation: gradientMove 4s linear infinite;
            border-radius: 28px 28px 0 0;
        }

/* Секция плеера */
        .section-title {
            font-size: 26px;
            font-weight: 700;
            text-align: center;
            margin-bottom: 30px;
            background: linear-gradient(135deg, #4CAF50, #00BCD4);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

.section-subtitle {
            font-size: 20px;
            font-weight: 600;
            margin-bottom: 20px;
            color: #00BCD4;
        }

.input-group {
            margin-bottom: 20px;
        }

.input-label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
            color: rgba(255, 255, 255, 0.9);
        }

.input-field {
            width: 100%;
            padding: 15px 20px;
            background: rgba(255, 255, 255, 0.07);
            border: 1px solid rgba(255, 255, 255, 0.15);
            border-radius: 20px;
            color: white;
            font-size: 15px;
            transition: all 0.3s ease;
            backdrop-filter: blur(10px);
        }

.input-field:focus {
            outline: none;
            border-color: #4CAF50;
            background: rgba(255, 255, 255, 0.1);
            box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.2);
        }

.search-group {
            position: relative;
            margin-bottom: 20px;
        }

.search-input {
            width: 100%;
            padding: 15px 50px 15px 20px;
            background: rgba(255, 255, 255, 0.07);
            border: 1px solid rgba(255, 255, 255, 0.15);
            border-radius: 20px;
            color: white;
            font-size: 15px;
            transition: all 0.3s ease;
        }

.search-btn {
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
            background: none;
            border: none;
            color: rgba(255, 255, 255, 0.7);
            cursor: pointer;
            padding: 5px;
        }

.search-results {
            max-height: 300px;
            overflow-y: auto;
            margin-bottom: 20px;
            border-radius: 15px;
            background: rgba(255, 255, 255, 0.05);
            padding: 15px;
        }

.film-item {
            display: flex;
            gap: 15px;
            padding: 12px;
            border-radius: 12px;
            cursor: pointer;
            transition: all 0.3s ease;
            margin-bottom: 10px;
            background: rgba(255, 255, 255, 0.05);
        }

.film-item:hover {
            background: rgba(255, 255, 255, 0.1);
            transform: translateY(-2px);
        }

.film-poster img {
            width: 60px;
            height: 90px;
            border-radius: 8px;
            object-fit: cover;
        }

.film-info {
            flex: 1;
        }

.film-title {
            font-weight: 600;
            color: white;
            margin-bottom: 5px;
        }

.film-year, .film-rating {
            font-size: 13px;
            color: rgba(255, 255, 255, 0.7);
        }

.selected-film {
            background: rgba(76, 175, 80, 0.2);
            border: 1px solid rgba(76, 175, 80, 0.4);
            padding: 12px 20px;
            border-radius: 15px;
            margin-bottom: 20px;
            text-align: center;
            color: #4CAF50;
            font-weight: 500;
        }

.player-sources {
            display: flex;
            gap: 10px;
            margin-bottom: 20px;
            flex-wrap: wrap;
            justify-content: center;
        }

.source-btn {
            padding: 10px 15px;
            background: rgba(255, 255, 255, 0.08);
            border: 1px solid rgba(255, 255, 255, 0.15);
            border-radius: 20px;
            color: rgba(255, 255, 255, 0.8);
            cursor: pointer;
            transition: all 0.3s ease;
            font-size: 13px;
        }

.source-btn:hover {
            background: rgba(255, 255, 255, 0.12);
        }

.source-btn.active {
            background: linear-gradient(135deg, #4CAF50, #00BCD4);
            border-color: transparent;
            color: white;
        }

.action-btn {
            width: 100%;
            padding: 16px;
            background: linear-gradient(135deg, #4CAF50, #00BCD4);
            border: none;
            border-radius: 20px;
            color: white;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            margin-top: 10px;
        }

.action-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 25px rgba(76, 175, 80, 0.4);
        }

/* Сетка фильмов */
        .movies-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }

.movie-card {
            background: rgba(255, 255, 255, 0.05);
            border-radius: 15px;
            overflow: hidden;
            cursor: pointer;
            transition: all 0.3s ease;
        }

.movie-card:hover {
            transform: translateY(-5px);
            background: rgba(255, 255, 255, 0.1);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
        }

.movie-card-poster img {
            width: 100%;
            height: 250px;
            object-fit: cover;
        }

.movie-card-info {
            padding: 15px;
        }

.movie-card-title {
            font-weight: 600;
            margin-bottom: 5px;
            font-size: 14px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

.movie-card-year, .movie-card-rating {
            font-size: 12px;
            color: rgba(255, 255, 255, 0.7);
        }

/* Сетка персон */
        .persons-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }

.person-card {
            display: flex;
            gap: 15px;
            background: rgba(255, 255, 255, 0.05);
            border-radius: 15px;
            padding: 15px;
            transition: all 0.3s ease;
        }

.person-card:hover {
            background: rgba(255, 255, 255, 0.1);
            transform: translateY(-3px);
        }

.person-photo img {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            object-fit: cover;
        }

.person-info {
            flex: 1;
        }

.person-name {
            font-weight: 600;
            margin-bottom: 5px;
        }

.person-profession, .person-movies {
            font-size: 13px;
            color: rgba(255, 255, 255, 0.7);
        }

/* Модальное окно плеера */
        .player-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.95);
            z-index: 1000;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }

.player-container {
            width: 100%;
            max-width: 1200px;
            height: 80vh;
            background: #000;
            border-radius: 15px;
            overflow: hidden;
            position: relative;
        }

.player-iframe {
            width: 100%;
            height: 100%;
            border: none;
        }

.close-player {
            position: absolute;
            top: 15px;
            right: 15px;
            background: rgba(255, 0, 0, 0.8);
            color: white;
            border: none;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            font-size: 20px;
            cursor: pointer;
            z-index: 1001;
        }

/* Анимации */
        @keyframes gradientMove {
            0% { background-position: 0% 50%; }
            100% { background-position: 400% 50%; }
        }

/* Стили для Киносправочника */
        .movie-search-container {
            margin-bottom: 20px;
        }

.movie-search-input {
            width: 100%;
            padding: 15px 20px;
            background: rgba(255, 255, 255, 0.07);
            border: 1px solid rgba(255, 255, 255, 0.15);
            border-radius: 20px;
            color: white;
            font-size: 15px;
            transition: all 0.3s ease;
        }

.movie-search-input:focus {
            outline: none;
            border-color: #4CAF50;
            background: rgba(255, 255, 255, 0.1);
        }

.movie-loader {
            display: none;
            text-align: center;
            padding: 40px;
            color: #00BCD4;
            font-size: 16px;
        }

.movie-initial-message {
            text-align: center;
            padding: 40px;
            color: rgba(255, 255, 255, 0.7);
        }

.movie-content-container {
            display: none;
            grid-template-columns: 1fr 2fr;
            gap: 30px;
            align-items: start;
        }

.movie-poster-container {
            text-align: center;
        }

.movie-poster {
            width: 100%;
            max-width: 300px;
            border-radius: 15px;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
        }

.movie-info-container {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

.movie-title {
            font-size: 28px;
            font-weight: 700;
            color: white;
            line-height: 1.2;
        }

.movie-meta {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-bottom: 10px;
        }

.movie-meta span {
            background: rgba(255, 255, 255, 0.1);
            padding: 5px 12px;
            border-radius: 15px;
            font-size: 13px;
            color: rgba(255, 255, 255, 0.9);
        }

.movie-rating {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 15px;
        }

.rating-value {
            font-size: 24px;
            font-weight: 700;
            color: #4CAF50;
        }

.movie-description {
            line-height: 1.6;
            color: rgba(255, 255, 255, 0.9);
            margin-bottom: 20px;
        }

.movie-cast {
            margin-top: 20px;
        }

.cast-title {
            font-size: 18px;
            font-weight: 600;
            margin-bottom: 15px;
            color: white;
        }

.cast-container {
            display: flex;
            gap: 15px;
            overflow-x: auto;
            padding-bottom: 10px;
        }

.cast-member {
            flex: 0 0 auto;
            text-align: center;
            width: 100px;
        }

.cast-photo {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            object-fit: cover;
            margin-bottom: 8px;
        }

.cast-name {
            font-size: 13px;
            font-weight: 500;
            color: white;
            margin-bottom: 3px;
        }

.cast-role {
            font-size: 11px;
            color: rgba(255, 255, 255, 0.7);
        }

.movie-actions {
            display: flex;
            gap: 10px;
            margin-top: 20px;
        }

.movie-action-btn {
            padding: 10px 20px;
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 20px;
            color: white;
            text-decoration: none;
            font-size: 14px;
            transition: all 0.3s ease;
            cursor: pointer;
        }

.movie-action-btn:hover {
            background: rgba(255, 255, 255, 0.2);
            transform: translateY(-2px);
        }

/* Стили для погоды */
        .weather-container {
            text-align: center;
        }

.weather-header {
            margin-bottom: 30px;
        }

.weather-icon {
            font-size: 64px;
            margin-bottom: 15px;
            animation: weatherIconFloat 3s ease-in-out infinite;
        }

@keyframes weatherIconFloat {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-10px); }
        }

.weather-temp {
            font-size: 48px;
            font-weight: 700;
            color: white;
            margin-bottom: 10px;
        }

.weather-desc {
            font-size: 18px;
            color: rgba(255, 255, 255, 0.9);
            margin-bottom: 5px;
        }

.weather-location {
            font-size: 16px;
            color: rgba(255, 255, 255, 0.7);
            margin-bottom: 25px;
        }

.weather-details {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 15px;
            margin-bottom: 25px;
        }

.weather-detail {
            background: rgba(255, 255, 255, 0.07);
            padding: 15px;
            border-radius: 15px;
            text-align: center;
        }

.detail-label {
            font-size: 13px;
            color: rgba(255, 255, 255, 0.7);
            margin-bottom: 5px;
        }

.detail-value {
            font-size: 16px;
            font-weight: 600;
            color: white;
        }

.weather-alerts {
            margin-top: 25px;
        }

.alert-item {
            background: rgba(255, 193, 7, 0.15);
            border: 1px solid rgba(255, 193, 7, 0.3);
            padding: 15px;
            border-radius: 15px;
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            gap: 12px;
            text-align: left;
        }

.alert-icon {
            font-size: 24px;
            flex-shrink: 0;
        }

.alert-rain { background: rgba(33, 150, 243, 0.15); border-color: rgba(33, 150, 243, 0.3); }
        .alert-snow { background: rgba(176, 190, 197, 0.15); border-color: rgba(176, 190, 197, 0.3); }
        .alert-storm { background: rgba(156, 39, 176, 0.15); border-color: rgba(156, 39, 176, 0.3); }
        .alert-warning { background: rgba(255, 152, 0, 0.15); border-color: rgba(255, 152, 0, 0.3); }

.no-alerts {
            text-align: center;
            color: rgba(255, 255, 255, 0.7);
            padding: 20px;
            background: rgba(255, 255, 255, 0.05);
            border-radius: 15px;
        }

.weather-actions {
            display: flex;
            gap: 10px;
            justify-content: center;
            margin-top: 20px;
        }

.weather-action-btn {
            padding: 10px 20px;
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 20px;
            color: white;
            cursor: pointer;
            transition: all 0.3s ease;
        }

.weather-action-btn:hover {
            background: rgba(255, 255, 255, 0.2);
            transform: translateY(-2px);
        }

/* Адаптивность */
        @media (max-width: 768px) {
            .container {
                max-width: 100%;
            }
            
            .movie-content-container {
                grid-template-columns: 1fr;
                gap: 20px;
            }
            
            .movie-poster {
                max-width: 250px;
            }
            
            .weather-details {
                grid-template-columns: 1fr;
            }
            
            .nav-buttons {
                flex-direction: column;
                align-items: center;
            }
            
            .nav-btn {
                width: 100%;
                text-align: center;
            }
            
            .movies-grid {
                grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
            }
            
            .persons-grid {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>

<div class="container">
        
        <div class="app-header">
            <h1 class="app-title">KinoPoiskID</h1>
            Платформа для просмотра фильмов и сериалов
        </div>

<div id="mainInterface" class="main-interface">
            
            <div class="nav-buttons">
                <button class="nav-btn active" data-section="playerSection" onclick="showSection('playerSection')">🎬 Плеер фильмов</button>
                <button class="nav-btn" data-section="movieSection" onclick="showSection('movieSection')">📚 Киносправочник</button>
                <button class="nav-btn" data-section="weatherSection" onclick="showSection('weatherSection')">🌤️ Погода</button>
            </div>

<div id="playerSection" class="function-section">
                <h2 class="section-title">🎬 Плеер фильмов</h2>
                
                <div class="input-group">
                    <label class="input-label">Поиск фильмов и сериалов:</label>
                    <div class="search-group">
                        <input type="text" id="searchInput" class="search-input" placeholder="Введите название фильма или сериала...">
                        <button class="search-btn" onclick="searchContent()">🔍</button>
                    </div>
                    <div id="searchResults" class="search-results"></div>
                </div>

<div class="input-group">
                    <label class="input-label">ID Кинопоиска:</label>
                    <input type="text" id="kpIdInput" class="input-field" placeholder="Введите ID Кинопоиска...">
                    <div id="selectedFilm" class="selected-film"></div>
                </div>

<div class="player-sources">
                    <button class="source-btn active" data-source="source1" onclick="selectPlayerSource('source1')">Основной плеер</button>
                    <button class="source-btn" data-source="source2" onclick="selectPlayerSource('source2')">Альтернативный 1</button>
                    <button class="source-btn" data-source="source3" onclick="selectPlayerSource('source3')">Альтернативный 2</button>
                    <button class="source-btn" data-source="source4" onclick="selectPlayerSource('source4')">Альтернативный 3</button>
                    <button class="source-btn" data-source="source5" onclick="selectPlayerSource('source5')">Альтернативный 4</button>
                    <button class="source-btn" data-source="source6" onclick="selectPlayerSource('source6')">Альтернативный 5</button>
                    <button class="source-btn" data-source="source7" onclick="selectPlayerSource('source7')">Альтернативный 6</button>
                    <button class="source-btn" data-source="source8" onclick="selectPlayerSource('source8')">Альтернативный 7</button>
                    <button class="source-btn" data-source="source9" onclick="selectPlayerSource('source9')">Альтернативный 8</button>
                    <button class="source-btn" data-source="source10" onclick="selectPlayerSource('source10')">Альтернативный 9</button>
                </div>

<button class="action-btn" onclick="openPlayer()">🎬 Смотреть фильм/сериал</button>
                
                
                <div id="popularMoviesContainer" class="movies-container">
                    
                </div>
                
                
                <div class="input-group">
                    <button class="action-btn" onclick="loadTopMovies()">🏆 Загрузить топ фильмов</button>
                    <div id="topMoviesContainer" class="movies-container">
                        
                    </div>
                </div>
                
                
                <div class="input-group">
                    <button class="action-btn" onclick="loadUpcomingMovies()">🎭 Загрузить ожидаемые новинки</button>
                    <div id="upcomingMoviesContainer" class="movies-container">
                        
                    </div>
                </div>
                
                
                <div class="input-group">
                    <label class="input-label">Поиск актеров и режиссеров:</label>
                    <div class="search-group">
                        <input type="text" id="personSearchInput" class="search-input" placeholder="Введите имя актера или режиссера...">
                        <button class="search-btn" onclick="searchPerson()">🔍</button>
                    </div>
                    <div id="personResultsContainer" class="search-results">
                        
                    </div>
                </div>
            </div>

<div id="movieSection" class="function-section" style="display: none;">
                <h2 class="section-title">📚 Киносправочник</h2>
                
                <div class="movie-search-container">
                    <input type="text" id="movieSearchInput" class="movie-search-input" 
                           placeholder="Введите название фильма для поиска информации..." 
                           onkeypress="if(event.key === 'Enter') searchMovieInfo()">
                </div>

<div id="movieLoader" class="movie-loader">
                    🔍 Поиск информации о фильме...
                </div>

<div id="movieInitialMessage" class="movie-initial-message">
                    <h3>Найдите информацию о любом фильме</h3>
                    Введите название фильма в поле выше, чтобы получить подробную информацию, включая описание, рейтинг, актерский состав и многое другое.
                </div>

<div id="movieContentContainer" class="movie-content-container">
                    <div class="movie-poster-container">
                        <img id="moviePoster" class="movie-poster" src="https://via.placeholder.com/400x600/121212/ffffff?text=Постер+фильма" alt="Постер фильма">
                    </div>
                    
                    <div class="movie-info-container">
                        <h1 id="movieTitle" class="movie-title">Название фильма</h1>
                        
                        <div id="movieMeta" class="movie-meta">
                            
                        </div>
                        
                        <div class="movie-rating">
                            <span class="rating-label">Рейтинг:</span>
                            <span id="movieRatingValue" class="rating-value">0.0</span>
                        </div>
                        
                        
                            Описание фильма будет загружено здесь...
                        
                        
                        <div class="movie-cast">
                            <h3 class="cast-title">Актерский состав</h3>
                            <div id="movieCastContainer" class="cast-container">
                                
                            </div>
                        </div>
                        
                        <div class="movie-actions">
                            <a id="movieKinopoiskBtn" class="movie-action-btn" href="#" target="_blank" onclick="event.preventDefault(); if(this.getAttribute('data-url')) window.open(this.getAttribute('data-url'), '_blank');">
                                📖 Кинопоиск
                            </a>
                            <a id="movieTrailerBtn" class="movie-action-btn" href="#" target="_blank" onclick="event.preventDefault(); if(this.getAttribute('data-url')) window.open(this.getAttribute('data-url'), '_blank');">
                                🎬 Трейлер
                            </a>
                        </div>
                    </div>
                </div>
                
                
                <div id="similarMoviesContainer" class="movies-container">
                    
                </div>
            </div>

<div id="weatherSection" class="function-section" style="display: none;">
                <h2 class="section-title">🌤️ Погода</h2>
                
                <div class="weather-container">
                    <div class="weather-header">
                        <div id="weatherIcon" class="weather-icon">🌤️</div>
                        <div id="weatherTemp" class="weather-temp">--°C</div>
                        <div id="weatherDesc" class="weather-desc">Загрузка данных о погоде...</div>
                        <div id="weatherLocation" class="weather-location">Определение местоположения...</div>
                    </div>

<div class="weather-details">
                        <div class="weather-detail">
                            <div class="detail-label">Влажность</div>
                            <div id="weatherHumidity" class="detail-value">--%</div>
                        </div>
                        <div class="weather-detail">
                            <div class="detail-label">Ветер</div>
                            <div id="weatherWind" class="detail-value">-- м/с</div>
                        </div>
                        <div class="weather-detail">
                            <div class="detail-label">Давление</div>
                            <div id="weatherPressure" class="detail-value">-- гПа</div>
                        </div>
                    </div>

<div id="weatherAlerts" class="weather-alerts">
                        <div class="no-alerts">Нет активных предупреждений</div>
                    </div>

<div class="weather-actions">
                        <button class="weather-action-btn" onclick="getWeatherByLocation()">🔄 Обновить</button>
                        <button class="weather-action-btn" onclick="getWeatherByCity(prompt('Введите название города:'))">🏙️ Выбрать город</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

<div id="playerModal" class="player-modal">
        <div class="player-container">
            <button class="close-player" onclick="closePlayer()">✕</button>
            <iframe id="playerIframe" class="player-iframe" src="" allowfullscreen></iframe>
        </div>
    </div>
	
    <script>
        // Обработчик для поиска фильмов при нажатии Enter
        document.getElementById('movieSearchInput')?.addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                searchMovieInfo();
            }
        });

// Обработчик для закрытия модальных окон при клике вне их
        window.onclick = function(event) {
            const playerModal = document.getElementById('playerModal');
            
            if (event.target === playerModal) {
                closePlayer();
            }
        }
   </script>
   <html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>KinoPoiskID - Просмотр фильмов (Oink Platforms WEB)</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap" rel="stylesheet">
 </body></html>

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>Таймер</title><style>body{margin:0;display:flex;justify-content:center;align-items:center;min-height:100vh;background:linear-gradient(135deg,#f093fb,#f5576c);font-family:Arial}.container{text-align:center;background:rgba(255,255,255,0.95);padding:60px 80px;border-radius:30px;box-shadow:0 20px 80px rgba(0,0,0,0.3)}h1{font-size:36px;margin-bottom:40px;color:#333}.timer{font-size:96px;font-weight:bold;margin:40px 0;color:#f5576c}.controls{display:flex;gap:20px;justify-content:center}button{padding:15px 40px;font-size:18px;border:none;border-radius:50px;cursor:pointer;font-weight:bold;transition:all 0.3s}.start{background:#4CAF50;color:#fff}.start:hover{background:#66BB6A}.pause{background:#ff9800;color:#fff}.reset{background:#f44336;color:#fff}</style></head><body><div class="container"><h1>⏱️ Таймер</h1><div class="timer" id="timer">05:00</div><div class="controls"><button class="start" onclick="toggle()">▶ Старт</button><button class="reset" onclick="reset()">↻ Сброс</button></div></div><script>let time=300,running=false,interval;function upd(){const m=Math.floor(time/60),s=time%60;document.getElementById('timer').textContent=\`\${m.toString().padStart(2,'0')}:\${s.toString().padStart(2,'0')}\`}function toggle(){running=!running;const btn=document.querySelector('.start');if(running){btn.textContent='⏸ Пауза';btn.className='pause';interval=setInterval(()=>{if(time>0){time--;upd()}else{reset();alert('Время вышло!')}},1000)}else{btn.textContent='▶ Старт';btn.className='start';clearInterval(interval)}}function reset(){running=false;clearInterval(interval);time=300;upd();document.querySelector('.start').textContent='▶ Старт';document.querySelector('.start').className='start'}upd()</script></body></html>

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>Часы</title><style>body{margin:0;display:flex;justify-content:center;align-items:center;min-height:100vh;background:linear-gradient(135deg,#1e3c72,#2a5298);font-family:Arial;color:#fff}.container{text-align:center}.digital{font-size:72px;font-weight:bold;margin-bottom:40px;text-shadow:0 0 20px rgba(255,255,255,0.5)}canvas{border-radius:50%;background:#fff;box-shadow:0 10px 50px rgba(0,0,0,0.3)}.date{font-size:24px;margin-top:30px;opacity:0.8}</style></head><body><div class="container"><div class="digital" id="digital"></div><canvas id="clock" width="300" height="300"></canvas><div class="date" id="date"></div></div><script>const canvas=document.getElementById('clock'),ctx=canvas.getContext('2d'),radius=canvas.width/2;ctx.translate(radius,radius);function draw(){const now=new Date(),h=now.getHours()%12,m=now.getMinutes(),s=now.getSeconds();ctx.clearRect(-radius,-radius,radius*2,radius*2);ctx.beginPath();ctx.arc(0,0,radius-10,0,2*Math.PI);ctx.fillStyle='#fff';ctx.fill();ctx.strokeStyle='#333';ctx.lineWidth=8;ctx.stroke();[0,1,2,3,4,5,6,7,8,9,10,11].forEach(num=>{const ang=num*Math.PI/6;ctx.beginPath();ctx.arc((radius-30)*Math.sin(ang),(radius-30)*-Math.cos(ang),4,0,2*Math.PI);ctx.fillStyle='#333';ctx.fill()});drawHand((h+m/60+s/3600)*Math.PI/6,radius*0.5,6);drawHand((m+s/60)*Math.PI/30,radius*0.7,4);drawHand(s*Math.PI/30,radius*0.85,2,'#f00');ctx.beginPath();ctx.arc(0,0,8,0,2*Math.PI);ctx.fillStyle='#333';ctx.fill();document.getElementById('digital').textContent=\`\${h.toString().padStart(2,'0')}:\${m.toString().padStart(2,'0')}:\${s.toString().padStart(2,'0')}\`;document.getElementById('date').textContent=now.toLocaleDateString('ru-RU',{weekday:'long',year:'numeric',month:'long',day:'numeric'})}function drawHand(ang,len,width,color='#333'){ctx.beginPath();ctx.lineWidth=width;ctx.lineCap='round';ctx.strokeStyle=color;ctx.moveTo(0,0);ctx.lineTo(len*Math.sin(ang),-len*Math.cos(ang));ctx.stroke()}setInterval(draw,1000);draw()</script></body></html>

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>Палитра</title><style>body{margin:0;padding:20px;background:#1a1a1a;font-family:Arial;color:#fff}.container{max-width:800px;margin:0 auto}h1{text-align:center;font-size:42px;margin-bottom:40px}.color-display{width:100%;height:200px;border-radius:20px;margin-bottom:30px;box-shadow:0 10px 40px rgba(0,0,0,0.5);transition:all 0.3s}.controls{background:#2a2a2a;padding:30px;border-radius:20px;margin-bottom:20px}input[type="color"]{width:100%;height:60px;border:none;border-radius:10px;cursor:pointer;margin-bottom:20px}.rgb,.hex{background:#333;padding:15px;border-radius:10px;margin:10px 0;font-size:18px;text-align:center;cursor:pointer}.rgb:hover,.hex:hover{background:#444}.palettes{display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:15px}.palette-item{height:80px;border-radius:10px;cursor:pointer;transition:all 0.3s;border:3px solid transparent}.palette-item:hover{transform:scale(1.1);border-color:#fff}</style></head><body><div class="container"><h1>🎨 Палитра Цветов</h1><div class="color-display" id="display"></div><div class="controls"><input type="color" id="picker" value="#4CAF50"><div class="hex" id="hex">#4CAF50</div><div class="rgb" id="rgb">rgb(76, 175, 80)</div><button style="width:100%;padding:15px;background:#4CAF50;color:#fff;border:none;border-radius:10px;font-size:16px;font-weight:bold;cursor:pointer;margin-top:10px" onclick="random()">🎲 Случайный цвет</button></div><div class="palettes" id="palettes"></div></div><script>const picker=document.getElementById('picker'),display=document.getElementById('display'),hexEl=document.getElementById('hex'),rgbEl=document.getElementById('rgb');function update(){const color=picker.value;display.style.background=color;hexEl.textContent=color.toUpperCase();const r=parseInt(color.substr(1,2),16),g=parseInt(color.substr(3,2),16),b=parseInt(color.substr(5,2),16);rgbEl.textContent=\`rgb(\${r}, \${g}, \${b})\`;generatePalette(color)}function random(){const r=()=>Math.floor(Math.random()*256).toString(16).padStart(2,'0');picker.value='#'+r()+r()+r();update()}function generatePalette(base){const palettes=document.getElementById('palettes');palettes.innerHTML='';for(let i=-2;i<=2;i++){const factor=1+i*0.2;const rgb=hexToRgb(base);const newColor=rgbToHex(Math.min(255,Math.floor(rgb.r*factor)),Math.min(255,Math.floor(rgb.g*factor)),Math.min(255,Math.floor(rgb.b*factor)));const div=document.createElement('div');div.className='palette-item';div.style.background=newColor;div.onclick=()=>{picker.value=newColor;update()};palettes.appendChild(div)}}function hexToRgb(hex){const r=parseInt(hex.substr(1,2),16),g=parseInt(hex.substr(3,2),16),b=parseInt(hex.substr(5,2),16);return{r,g,b}}function rgbToHex(r,g,b){return'#'+[r,g,b].map(x=>x.toString(16).padStart(2,'0')).join('')}picker.oninput=update;hexEl.onclick=()=>{navigator.clipboard.writeText(hexEl.textContent);alert('Скопировано!')};rgbEl.onclick=()=>{navigator.clipboard.writeText(rgbEl.textContent);alert('Скопировано!')};update()</script></body></html>

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>Частицы</title><style>body{margin:0;overflow:hidden;background:#000}canvas{display:block}.info{position:absolute;top:20px;left:20px;color:#fff;font-family:Arial}</style></head><body><div class="info">Двигай мышью ✨</div><canvas id="c"></canvas><script>const c=document.getElementById('c'),ctx=c.getContext('2d');c.width=innerWidth;c.height=innerHeight;const particles=[],mouse={x:null,y:null};class Particle{constructor(){this.x=Math.random()*c.width;this.y=Math.random()*c.height;this.size=Math.random()*3+1;this.speedX=Math.random()*3-1.5;this.speedY=Math.random()*3-1.5;this.color=\`hsl(\${Math.random()*360},100%,50%)\`}update(){this.x+=this.speedX;this.y+=this.speedY;if(this.x>c.width||this.x<0)this.speedX*=-1;if(this.y>c.height||this.y<0)this.speedY*=-1;if(mouse.x){const dx=mouse.x-this.x,dy=mouse.y-this.y,d=Math.sqrt(dx*dx+dy*dy);if(d<150){this.x-=dx/d*2;this.y-=dy/d*2}}}draw(){ctx.fillStyle=this.color;ctx.beginPath();ctx.arc(this.x,this.y,this.size,0,Math.PI*2);ctx.fill()}}for(let i=0;i<150;i++)particles.push(new Particle());function animate(){ctx.fillStyle='rgba(0,0,0,0.05)';ctx.fillRect(0,0,c.width,c.height);particles.forEach(p=>{p.update();p.draw()});requestAnimationFrame(animate)}c.addEventListener('mousemove',e=>{mouse.x=e.x;mouse.y=e.y});c.addEventListener('mouseleave',()=>{mouse.x=null;mouse.y=null});addEventListener('resize',()=>{c.width=innerWidth;c.height=innerHeight});animate()</script></body></html>
            }
        };=='Enter')add()"><button onclick="add()">➕</button></div><div class="todo-list" id="list"></div></div><script>let todos=JSON.parse(localStorage.getItem('todos')||'[]');function render(){document.getElementById('list').innerHTML=todos.map((t,i)=>\`<div class="todo-item \${t.done?'done':''}"><input type="checkbox" \${t.done?'checked':''} onchange="toggle(\${i})"><div class="txt">\${t.text}</div><button class="del" onclick="remove(\${i})">🗑️</button></div>\`).join('')}function add(){const inp=document.getElementById('inp'),text=inp.value.trim();if(text){todos.push({text,done:false});inp.value='';save()}}function toggle(i){todos[i].done=!todos[i].done;save()}function remove(i){todos.splice(i,1);save()}function save(){localStorage.setItem('todos',JSON.stringify(todos));render()}render()<\/script></body></html>
</html>

<!DOCTYPE html>
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap" rel="stylesheet">
    <style>
      * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

body {
            font-family: 'Poppins', sans-serif;
            background: #0a0a0a;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 20px;
            position: relative;
            color: #fff;
        }

/* Анимированный фон */
        body::before {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background:
                radial-gradient(circle at 25% 25%, #4CAF50 0%, transparent 50%),
                radial-gradient(circle at 75% 75%, #00BCD4 0%, transparent 50%),
                radial-gradient(circle at 50% 50%, #9C27B0 0%, transparent 50%);
            filter: blur(120px);
            opacity: 0.4;
            animation: backgroundShift 12s ease-in-out infinite alternate;
            z-index: -1;
        }

@keyframes backgroundShift {
            0% { transform: scale(1) rotate(0deg); }
            100% { transform: scale(1.1) rotate(8deg); }
        }

/* Кнопка открытия модального окна */
        .open-modal-btn {
            padding: 18px 35px;
            background: linear-gradient(135deg, #4CAF50, #00BCD4);
            border: none;
            border-radius: 25px;
            color: white;
            font-size: 18px;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 10px 30px rgba(76, 175, 80, 0.4);
            z-index: 10;
            display: flex;
            align-items: center;
            gap: 10px;
        }

.open-modal-btn:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 40px rgba(76, 175, 80, 0.6);
        }

/* Модальное окно */
        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.95);
            z-index: 1000;
            align-items: center;
            justify-content: center;
            padding: 20px;
            overflow-y: auto;
        }

.modal-content {
            background: rgba(30, 30, 30, 0.95);
            backdrop-filter: blur(40px);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 28px;
            width: 100%;
            max-width: 1000px;
            max-height: 90vh;
            overflow-y: auto;
            position: relative;
            box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
        }

.modal-content::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: linear-gradient(90deg, #4CAF50, #00BCD4, #9C27B0, #4CAF50);
            background-size: 400% 100%;
            animation: gradientMove 4s linear infinite;
            border-radius: 28px 28px 0 0;
        }

.close-modal {
            position: absolute;
            top: 20px;
            right: 20px;
            background: rgba(255, 0, 0, 0.8);
            color: white;
            border: none;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            font-size: 20px;
            cursor: pointer;
            z-index: 1001;
            display: flex;
            align-items: center;
            justify-content: center;
        }

.modal-header {
            padding: 30px 30px 20px;
            text-align: center;
        }

.modal-title {
            font-size: 32px;
            font-weight: 800;
            background: linear-gradient(135deg, #4CAF50, #00BCD4, #9C27B0);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            margin-bottom: 10px;
        }

.modal-subtitle {
            font-size: 16px;
            color: rgba(255, 255, 255, 0.8);
        }

.modal-body {
            padding: 0 30px 30px;
        }

/* Навигация по функциям */
        .nav-buttons {
            display: flex;
            gap: 10px;
            margin-bottom: 20px;
            justify-content: center;
            flex-wrap: wrap;
        }

.nav-btn {
            padding: 12px 20px;
            background: rgba(255, 255, 255, 0.08);
            border: 1px solid rgba(255, 255, 255, 0.15);
            border-radius: 25px;
            color: rgba(255, 255, 255, 0.8);
            cursor: pointer;
            transition: all 0.3s ease;
            font-size: 14px;
            font-weight: 500;
            backdrop-filter: blur(10px);
        }

.nav-btn:hover {
            background: rgba(255, 255, 255, 0.12);
            border-color: rgba(255, 255, 255, 0.25);
            transform: translateY(-2px);
        }

.nav-btn.active {
            background: linear-gradient(135deg, #4CAF50, #00BCD4);
            border-color: transparent;
            color: white;
            box-shadow: 0 8px 25px rgba(76, 175, 80, 0.3);
        }

/* Секции функций */
        .function-section {
            display: none;
        }

.function-section.active {
            display: block;
        }

.section-title {
            font-size: 24px;
            font-weight: 700;
            text-align: center;
            margin-bottom: 25px;
            background: linear-gradient(135deg, #4CAF50, #00BCD4);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

.section-subtitle {
            font-size: 18px;
            font-weight: 600;
            margin-bottom: 15px;
            color: #00BCD4;
        }